<!DOCTYPE html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Custom control in the lightbox</title>
</head>
<script src="../../codebase/dhtmlxgantt.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../../codebase/dhtmlxgantt.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="../common/testdata.js" type="text/javascript" charset="utf-8"></script>

<body>
<div id="gantt_here" style='width:1000px; height:400px;'></div>

<script type="text/javascript">

    gantt.init("gantt_here");
    gantt.form_blocks["my_editor"] = {
	render:function(sns) {
		return "<div class='dhx_cal_ltext' style='height:60px;'>Text&nbsp;<input type='text'><br/>Holders&nbsp;<input type='text'></div>";
	},
	set_value:function(node, value, task) {
		node.childNodes[1].value = value || "";
		node.childNodes[4].value = task.users || "";
	},
	get_value:function(node, task) {
		task.users = node.childNodes[4].value;
		return node.childNodes[1].value;
	},
	focus:function(node) {
		var a = node.childNodes[1];
		a.select();
		a.focus();
	}
     };
     gantt.config.lightbox.sections = [
	{ name:"description", height:200, map_to:"text", type:"my_editor" , focus:true},
	{ name:"time", type:"duration", map_to:"auto"}
     ];


    gantt.parse(users_data);
    gantt.showLightbox(1);
</script>
</body>